/*
* @Author: Yejing
* @Date: 2023-06-14 16:43:14
* @LastEditors: Yejing
* @LastEditTime: 2023-06-26 16:59:25
* @Description: 任务组件
*/
<template>
    <view class="task-card">
        <view class="name">
					<uni-tooltip :content="task.shopName">
						<view style="color: #000; font-size: 14px; font-weight: bold;width: 140px;display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;">	{{ task.shopName }}</view>
					</uni-tooltip>
            <u-image height="32rpx" width="32rpx" :src="require(`@/static/images/grad/VIP ${task.shopLevelId}@2x.png`)"></u-image>
            <text> {{ task.taskName }}</text>
        </view>
        <view class="tip flex">
            <view class="stip">
                <u-image height="32rpx" width="32rpx" src="@/static/images/sharpicons_ribbon.png"></u-image>
                <view class="gray-title">
                    <text>{{$t('anchorConsole.Credibility')}}:</text>
                    {{ task.needReputation }}
                </view>
            </view>
            <view class="gray-title">
                <text> {{$t('anchorConsole.ShopClass')}}:</text>
                {{ task.shopLevelName }}
            </view>
        </view>
        <view class="intro">
            {{ task.taskInfo }}
        </view> 
				<view class="intro">
          {{$t('anchorConsole.category')}}： {{ task.category }}
        </view>
        <!--        <view class="tip">-->
        <!--            <view class="gray-title">-->
        <!--                <text>任务目标:</text>-->
        <!--                {{ task.target }}-->
        <!--            </view>-->
        <!--        </view>-->
        <view class="tip bottom">
            <view class="gray-title">
                <text>{{$t('anchorConsole.date')}}:</text>

              	<!-- <text v-if="taskInfo.taskStartTime">{{ taskInfo.taskStartTime.split(' ')[0] }} to {{ taskInfo.taskEndTime.split(' ')[0] }}</text> -->
				<view v-if="task.taskStartTime">
					{{publicJS.timeZoneSwitching(task.taskStartTime,"DD/MM/YYYY")}}
					<text>-</text>
					{{publicJS.timeZoneSwitching(task.taskEndTime,"DD/MM/YYYY")}}
				</view>
            </view>
            <!--                        <view class="left">-->
            <!--                            <view class="gray-title">-->
            <!--                                <text>发布次数:</text>-->
            <!--                                {{ task.cs }}-->
            <!--                            </view>-->
            <!--                            <view class="gray-title lf">-->
            <!--                                <text>日期:</text>-->
            <!--                                {{ task.date }}-->
            <!--                            </view>-->
            <!--                        </view>-->
            <u-button type="primary" @click="$u.route('pages/anchorConsole/page/taskDetails',{type:'anchorLook',myFlag:task.myFlag,taskId:task.id})"> {{$t('anchorConsole.ViewTask')}}
            </u-button>
        </view>
        <!-- 店铺身份才有这个模块-->
        <view class="tag" v-if="task.myFlag">
            <u-image height="34rpx" width="28rpx" src="@/static/images/start.png"></u-image>
            {{$t('anchorConsole.mine')}}
        </view>
    </view>
</template>

<script>
export default {
    props: {
        task: {
            type: Object,
            default: () => ({})
        },
        followUrlData: {
            type: Object,
            default: () => ({
                type: ''
            })
        }
    },
    name: 'taskCard',
    data() {
        return {};
    }
}
</script>

<style lang="scss" scoped>

.task-card {
  width: 100%;
  padding: 28rpx 32rpx;
  background: #FFFFFF;
  border-radius: 26rpx 26rpx 26rpx 26rpx;
  opacity: 1;
  border: 2rpx solid #E1E8E8;
  position: relative;
  margin-bottom: 30rpx;

  .flex {
    display: flex;
    margin-top: 10rpx;
  }

  .name {
    font-size: 36rpx;
    color: #1B1D29;
    display: flex;
    align-items: center;

    .u-image {
      margin: 0rpx 30rpx 0 10rpx;
    }

    uni-text {
      font-size: 24rpx;
    }

  }

  .intro {
    margin: 30rpx 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .stip {
    display: flex;
    align-items: center;
    margin-right: 16rpx;

    .u-image {
      margin-right: 5rpx;
    }
  }

  .tip {
    font-size: 24rpx;
    color: #1B1D29;

    .gray-title {
		display: flex;
      uni-text {
        color: #91909A;
        margin-right: 9rpx;
      }

    }

    .lf {
      margin-left: 25rpx;
    }
  }

  .bottom {
    display: flex;
    margin-top: 20rpx;
    justify-content: space-between;


    .left {
      display: flex;
      width: 80%;
    }

    .u-btn {
      font-size: 24rpx;
      width: 210rpx;
      background: #2934D0;
      border-radius: 26rpx 26rpx 26rpx 26rpx;
      height: 52rpx;
      opacity: 1;
      text-align: right;
      margin: 0;
    }


  }

  .tag {
    position: absolute;
    width: 128rpx;
    height: 54rpx;
    background: #35E8F7;
    border-radius: 8rpx 28rpx 8rpx 8rpx;
    opacity: 1;
    right: -1rpx;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #fff;

    .u-image {
      margin-right: 10rpx;
    }
  }
}
</style>
